<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="FileUploadCtrl"  nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
  <div class="col w-lg bg-light b-r bg-auto">
    <div class="wrapper-md dker b-b">
      <h3 class="m-n font-thin">选择文件</h3>
    </div>
    <div class="wrapper-md">      
      <div ng-show="uploader.isHTML5" class="m-b-md">

          <div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-over="" over-class="b-info" uploader="uploader">
            拖放至此
          </div>

 
      </div>

      <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
      <p>支持多选单选</p>
      <input type="file" nv-file-select="" uploader="uploader" multiple  />

    <!--   <p class="m-t-md">Single</p>
      <input type="file" nv-file-select="" uploader="uploader" /> -->
    </div>
  </div>
  <div class="col">
    <div class="wrapper-md bg-light dk b-b">
      <span class="pull-right m-t-xs">文件个数: <b class="badge bg-info">{{ uploader.queue.length }}</b></span>
      <h3 class="m-n font-thin">文件参数</h3>      
    </div>
    <div class="wrapper-md">
      <table class="table bg-white-only b-a">
          <thead>
              <tr>
                  <th width="50%">名称</th>
                  <th ng-show="uploader.isHTML5">大小</th>
                  <th ng-show="uploader.isHTML5">进度</th>
                  <th>状态</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="item in uploader.queue">
                  <td><strong>{{ item.file.name }}</strong></td>
                  <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                  <td ng-show="uploader.isHTML5">
                      <div class="progress progress-sm m-b-none m-t-xs">
                          <div class="progress-bar bg-info" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                      </div>
                  </td>
                  <td class="text-center">
                      <span ng-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
                      <span ng-show="item.isCancel" class="text-warning"><i class="glyphicon glyphicon-ban-circle"></i></span>
                      <span ng-show="item.isError" class="text-danger"><i class="glyphicon glyphicon-remove"></i></span>
                  </td>
                  <td nowrap>
                      <button type="button" class="btn btn-default btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                          上传
                      </button>
                      <button type="button" class="btn btn-default btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                          取消
                      </button>
                      <button type="button" class="btn btn-default btn-xs" ng-click="item.remove()">
                          删除
                      </button>
                  </td>
              </tr>
          </tbody>
      </table>
      <div>
        <div>
          <p>Queue progress:</p>
          <div class="progress bg-light dker" style="">
              <div class="progress-bar progress-bar-striped bg-info" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
          </div>
        </div>
        <button type="button" class="btn btn-addon btn-success" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
          <i class="fa fa-arrow-circle-o-up"></i> 全部上传
        </button>
        <button type="button" class="btn btn-addon btn-warning" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
          <i class="fa fa-ban"></i> 取消全部
        </button>
        <button type="button" class="btn btn-addon btn-danger" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
            <i class="fa fa-trash-o"></i> 删除全部
        </button>
        <p class="text-muted m-t-xl">Note: upload.php file included, files will be uploaded to "src/js/controllers/uploads".</p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
app.controller('FileUploadCtrl', ['$scope', 'FileUploader', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
      //目标地址
        url: 'js/controllers/upload.php'
    });

    // FILTERS

    uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            return this.queue.length < 10;
        }
    });

     // CALLBACKS

    uploader.onWhenAddingFileFailed = function(item , filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
        alert("aaaaaaaaaaaaaaa");
    };
    //选择多少个文件执行多少次
    uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
        alert("点击选择文件执行（单个文件与数组同时执行）");
    };
    //执行一次 所有文件的数组
    uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
         alert("选择文件执行2（数组文件）");
    };
    uploader.onBeforeUploadItem = function(item) {
        console.info('onBeforeUploadItem', item);
         alert("点击上传之后执行");
    };
    uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
         alert("进度条开始执行");
    };
    uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
         alert("进度条执行完毕");
    };
    uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
         alert("gggggggggggggggg");
    };
    uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
         alert("hhhhhhhhhhhhhhhhhhhhhhh");
    };
    uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
         alert("iiiiiiiiiiiiiiiiii");
    };
    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
         alert("jjjjjjjjjjjjjjjjjjjjjjjjj");
    };
    uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
         alert("kkkkkkkkkkkkkkkkkkkkkkkkkkk");
    };

    console.info('uploader', uploader);
}]);
</script>